@import "./_mixins.less";

:host {
  position: relative; // required to position the menu
}

.bk-menu {
  &.bk-above {
    bottom: 100%;
  }
  &.bk-below {
    top: 100%;
  }

  position: absolute;
  left: 0;
  width: 100%;
  z-index: var(--bokeh-top-level);

  cursor: pointer;
  font-size: var(--font-size);
  background-color: var(--background-color);
  border: var(--border);
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow-x-symmetric);

  & > .bk-divider {
    height: 1px;
    margin: calc(var(--line-height-computed)/2 - 1px) 0;
    overflow: hidden;
    background-color: var(--divider-color);
  }

  & > :not(.bk-divider) {
    padding: var(--padding-vertical) var(--padding-horizontal);

    &:hover, &.bk-active {
      background-color: var(--surface-background-color);
    }
  }
}
